<template>
    <div class="page-container">
        <!-- 头部标题和操作按钮 -->
        <div class="header">
            <h2>会员卡</h2>

        </div>
        <el-button type="primary" :icon="Plus" @click="dialogFormVisible = true">添加自定义权益</el-button>
        <!-- 主体表格 -->
        <el-table :data="tableData" stripe border style="width: 100%" header-row-class-name="table-header">
            <el-table-column prop="equityName" label="权益名称" width="180">
                <template #default="{ row }">
                    <el-icon>
                        <Discount />
                    </el-icon>
                    {{ row.equityName }}
                </template>
            </el-table-column>

            <el-table-column prop="equityInstructions" label="权益说明" />

            <!-- <el-table-column prop="sort" label="排序" width="100" align="center" /> -->   

            <el-table-column prop="status" label="状态" width="120" align="center">
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template #default="{ row }">
                    <el-button v-if="row.status === '未设置'" type="primary" link @click="handleSetRule(row)">
                        设置规则
                    </el-button>
                    <el-button v-else type="info" link @click="handleView(row)">
                        查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogFormVisible" title="权益设置" width="500">
            <el-form :model="form" label-width="140">
                <el-form-item label="权益名称">
                    <el-input v-model="form.equityName" />
                </el-form-item>
                <el-form-item label="权益图标">
                    <el-input v-model="form.equityInstructions" />
                </el-form-item>
                <el-form-item label="权益说明">
                    <el-input v-model="form.equityicon" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="Add">确定</el-button>
                    <el-button @click="dialogFormVisible = false">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getMembershipbenefitsList, inserttMembershipbenefits } from '@/api/index'
import {
    Plus,
    Discount,
} from '@element-plus/icons-vue'

// 表格数据
const tableData = ref([])
const getlist = () => {
    getMembershipbenefitsList().then(res => {
        tableData.value = res.data
    })
}
onMounted(() => {
    getlist()
}) 
const dialogFormVisible = ref(false)
const form = reactive({
    equityName: "",
    equityInstructions: "",
    equityicon: ""

})
//添加
const Add = () => {
    inserttMembershipbenefits(form).then(res => {
        if (res.code == 200) {
            getlist()
        }
        else {

        }
    })
}

// 操作处理
const handleSetRule = (row) => {
    console.log('设置规则', row)
}

const handleView = (row) => {
    console.log('查看详情', row)
}
</script>

<style scoped>
.page-container {
    padding: 20px;
    background-color: #f5f7fa;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

:deep(.table-header) th {
    background-color: #f8f9fa;
    color: #606266;
    font-weight: 600;
}

.el-table {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f8f9fa;
}

.el-tag {
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
}
</style>